<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商城</title>
		<script src="js/mui.min.js"></script>
		<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/main.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />

		<body>
			<header class="mui-bar mui-bar-nav main-color FFF">
				<div class="mui-input-row mui-search mui-pull-left mui-col-xs-9">
					<input type="search" class="mui-input-clear" placeholder="搜索商品">
				</div>

				<a class="mui-btn mui-btn-link mui-btn-nav mui-pull-right mui-col-xs-2">
					高新区
					<span class="mui-icon mui-icon-right-nav"></span>
				</a>
			</header>

			<div class="mui-content">

				<!--banner start-->
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/yuantiao.jpg">
							</a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/shop_02.jpg">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/shop_02.jpg">
							</a>
						</div>
						<!-- 第三张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/shop_02.jpg">
							</a>
						</div>
						<!-- 第四张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="images/shop_02.jpg">
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/shop_02.jpg">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<!--banner End-->

				<!--分類 start-->
				<div class="mui-slider">
					<div class="mui-slider-group">
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view mui-grid-9 shop-icon-sort">
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="shop-child.html" title="">
										<span><img src="i/nav-1.png"></span>
										<div class="mui-media-body">瞧他买</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="shop-child.html" title="">
										<span><img src="i/nav-2.png"></span>
										<div class="mui-media-body">重物送</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="shop-child.html" title="">
										<span><img src="i/nav-3.png"></span>
										<div class="mui-media-body">套包购</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="shop-child.html" title="">
										<span><img src="i/nav-1.png"></span>
										<div class="mui-media-body">生鲜惠</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="shop-child.html" title="">
										<span><img src="i/nav-1.png"></span>
										<div class="mui-media-body">好吃嘴</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="shop-child.html" title="">
										<span><img src="i/nav-2.png"></span>
										<div class="mui-media-body">免费券</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
									<a href="shop-child.html" title="">
										<span><img src="i/nav-3.png"></span>
										<div class="mui-media-body">套包购</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>

				<!--分類 End-->

				<!--掌柜推荐 start -->
				<ul class="mui-table-view mui-grid-view margin10">
					<li class="mui-table-view-cell mui-media mui-col-xs-6 ">
						<div class="shop-title shop-title-red">掌柜推荐</div>
						<a href="item.html" title="">
							<img class="mui-media-object" src="images/shop_03.jpg">
							<div class="mui-ellipsis-2 font12 mui-text-left">经典培根 培根肉片 西式烟楠片披萨炒饭1000g</div>
							<div class="mui-text-left shop-price">
								¥169
								<strike>¥32</strike>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<div class="shop-title shop-title-free">Daily免费送</div>
						<a href="item.html" title="">
							<img class="mui-media-object" src="images/shop_05.jpg">
							<div class="mui-ellipsis-2 font12 mui-text-left">经典培根培根肉片</div>
							<div class="daily-free fl">
								<ul>
									<li>
										<img src="images/shop_03.jpg">
									</li>
									<li>
										<img src="images/shop_05.png">
									</li>
								</ul>
							</div>
						</a>
					</li>
				</ul>

				<!--掌柜推荐 End -->

				<!--具体商品-->
				<div class="shop-title shop-title-red big-title FFFback">推荐商品</div>
				<ul class="mui-table-view mui-grid-view shop-goods">
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="item.html" title="">
							<img class="mui-media-object" src="images/shop_05.png" alt="">
							<div class="mui-ellipsis-2 font12 mui-text-left">经典培根 培根肉片 西式烟楠片披萨炒饭1000g</div>
							<div class="mui-text-left shop-price">
								¥169
								<strike>¥32</strike>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="item.html" title="">
							<img class="mui-media-object" src="images/shop_05.png" alt="">
							<div class="mui-ellipsis-2 font12 mui-text-left">经典培根 培根肉片 西式烟楠片披萨炒饭1000g</div>
							<div class="mui-text-left shop-price">
								¥169
								<strike>¥32</strike>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="item.html" title="">
							<img class="mui-media-object" src="images/shop_05.png" alt="">
							<div class="mui-ellipsis-2 font12 mui-text-left">经典培根 培根肉片 西式烟楠片披萨炒饭1000g</div>
							<div class="mui-text-left shop-price">
								¥169
								<strike>¥32</strike>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6">
						<a href="item.html" title="">
							<img class="mui-media-object" src="images/shop_05.png" alt="">
							<div class="mui-ellipsis-2 font12 mui-text-left">经典培根 培根肉片 西式烟楠片披萨炒饭1000g</div>
							<div class="mui-text-left shop-price">
								¥169
								<strike>¥32</strike>
							</div>
						</a>
					</li>
				</ul>
			</div>
		

			<!--footer start-->
			<footer>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active" href="shop-child.html">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">商城</span>
					</a>
					<a class="mui-tab-item" href="nav.html">
						<span class="mui-icon mui-icon-phone"></span>
						<span class="mui-tab-label">小时达</span>
					</a>

					<a class="mui-tab-item" href="community.html">
						<span class="mui-icon mui-icon-chat"></span>
						<span class="mui-tab-label">绿肺社区</span>
					</a>

					<a class="mui-tab-item" href="myCenter.html">
						<span class="mui-icon mui-icon-person"></span>
						<span class="mui-tab-label">个人中心</span>
					</a>
				</nav>
			</footer>
			<!--footer End-->

			<script>
				mui.init();
				var gallery = mui('.mui-slider');
				gallery.slider({
					interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
				});
				mui.init({
					swipeBack: false,
				});
			</script>

		</body>

</html>